<template>
	<view>
		<view class="come-title">来访人员信息审核</view>
		<view class="come-content">
			<view class="basic-box shadow-around">
				<view class="public-title">来访人基本信息</view>
				<view class="basic-item">
					<view class="item-box">
						<view class="item-name">姓名：</view>
						<view class="item-info">{{infoList.visitorName}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">证件类型：</view>
						<view class="item-info">{{infoList.visitorCardTypeName}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">证件号码：</view>
						<view class="item-info">{{infoList.visitorCardNumber}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">手机号：</view>
						<view class="item-info">{{infoList.visitorPhone}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">公司/单位：</view>
						<view class="item-info">{{infoList.visitorDepartName}}</view>
					</view>
					<!-- <view class="item-box">
						<view class="item-name">备注：</view>
						<view class="item-info">无</view>
					</view> -->
				</view>
			</view>
			<view class="basic-box shadow-around">
				<view class="public-title">来访事由及受访信息</view>
				<view class="Reason-item">
					<view class="item-box">
						<view class="item-name" style="white-space: nowrap;">访问事由：</view>
						<view class="item-info">{{infoList.reasonDesc}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">被访人姓名：</view>
						<view class="item-info">{{infoList.intervieweeName}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">部门：</view>
						<view class="item-info">{{infoList.intervieweeDepartName}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">访问时间：</view>
						<view class="item-info">{{infoList.visitorBeginDate}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">结束时间：</view>
						<view class="item-info">{{infoList.visitorEndDate}}</view>
					</view>
					<view class="item-box">
						<view class="item-name">随行人员：</view>
						<view class="item-info">{{infoList.visitorPeopleNumber}}人</view>
					</view>
					<view class="item-box">
						<scroll-view scroll-y="true" class="item-box-follow" :show-scrollbar="false">
							<uni-table border stripe emptyText="暂无更多数据">
								<!-- 表头行 -->
								<uni-tr>
									<uni-th align="center" width="50px">姓名</uni-th>
									<uni-th align="center" width="50px">证件号</uni-th>
									<uni-th align="center" width="60px">工牌号<span class="heavy">*</span>

									</uni-th>
								</uni-tr>
								<uni-tr v-for="(itemFollow,index) in infoList.followPeopleList">
									<uni-td align="center">{{itemFollow.visitorName}}</uni-td>
									<uni-td align="center">{{itemFollow.visitorCardNumber}}</uni-td>
									<uni-td align="center">
										<view class="" style="width: 100%;">
											<input type="text" v-model="itemFollow.workNo" placeholder="请输入" value="" />
										</view>
									</uni-td>
								</uni-tr>
							</uni-table>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="basic-box shadow-around">
				<view class="public-title">身份验证与安全信息</view>
				<view class="identity-item">
					<view class="identity-title">
						<!-- 预约管理 -->
						<view class="identity-title-box" v-if="isStatus === 'pre'">
							<view class="item-name">审核状态：</view>
							<view :class="['status-badge','item-status', getStatusClass(infoList.auditStatus)]">
								{{ getStatusText(infoList.auditStatus) }}
							</view>

						</view>
						<!-- 访客记录 -->
						<view class="identity-title-box" v-if="isStatus === 'record'">
							<view class="item-name">拜访状态：</view>

							<view class="item-status"
								:style="infoList.visitStatus === 1 ? 'color:#006aff;' : 'color: #333;'">
								{{ infoList.visitStatus === 1 ? '已拜访' : '已结束' }}
							</view>


						</view>
					</view>
					<view class="identity-box">
						<view class="item-name">证件扫描/照片：</view>
						<view class="item-infoImg">
							<image :src="infoList.faceFilePath" mode=""></image>
						</view>
					</view>
					<view class="item-car">
						<view class="item-name">车辆牌号：</view>
						<view class="item-info">{{infoList.visitorCarNumber}}</view>
					</view>
					<!-- 预约管理 -->
					<view class="item-btn" v-if="isStatus === 'pre' && infoList.auditStatus == 1">
						<view class="btn-public btn-ok" @click="hnadleReview(1)">确认放行</view>
						<view class="btn-public btn-Away" @click="hnadleReview(2)">暂时离开</view>
						<view class="btn-public btn-no" @click="hnadleReview(3)">确认离开</view>
					</view>

				</view>
			</view>
		</view>



	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch
	} from "vue"
	import {
		$get,
		$post
	} from "@/utils/request.js"

	const props = defineProps({
		currentId: {
			type: Number, // 指定类型
			required: true, // 是否必传
			default: 0
		}
	})

	const queryId = ref(null); // 被查询人员的id
	const isStatus = ref(null); // 用于区分是1访客预约的详情 和 2记录的详情 
	onMounted(() => {
		// 初始化赋值
		updateData(props.currentId);
		getInfo();
	});

	// 监听 props.currentId 的变化
	watch(
		() => props.currentId,
		(newVal) => {
			if (newVal) { // 确保有值再处理
				updateData(newVal);
				console.log(queryId.value, '监听结果');
				getInfo();
			}
		}, {
			deep: true
		}
	);

	const updateData = (currentId) => {
		queryId.value = currentId.id;
		isStatus.value = currentId.mark;
	};

	//查询详情
	const infoList = ref({})
	const getInfo = () => {
		$get('/system/visitorInfo/getInfo', {
			id: queryId.value
		}).then(res => {
			infoList.value = res.data

		})
	}


	// 审核状态映射
	const statusMap = {
		0: {
			text: '待审核',
			class: 'status-pending'
		},
		1: {
			text: '已通过',
			class: 'status-approved'
		},
		2: {
			text: '已拒绝',
			class: 'status-completed'
		},
		3: {
			text: '已结束',
			class: 'status-rejected'
		}
	};

	// 获取状态对应的样式类
	const getStatusClass = (status) => {
		return statusMap[status]?.class || 'status-default';
	};

	// 获取状态对应的文本
	const getStatusText = (status) => {
		return statusMap[status]?.text || '未知状态';
	};



	const emit = defineEmits(['releaseSuccess']); //放行成功关闭弹窗
	//放行操作
	const hnadleReview = (val) => {
		const form = {
			id: infoList.value.id,
			status: val,
			workBoList: infoList.value.followPeopleList
		}

		let allHaveWorkNo = true;

		for (let i = 0; i < form.workBoList.length; i++) {
			const item = form.workBoList[i];
			if (!item.workNo || item.workNo.trim() === '') {
				allHaveWorkNo = false;
				break;
			}
		}

		if (!allHaveWorkNo) {
			uni.showToast({
				title: '请确保所有人员的工号都不为空',
				icon: 'none'
			});
			return;
		}

		$post(`/system/visitorInfo/visit`, form).then(res => {
			if (res.code == 200) {
				// getInfo(itemVal.value)
				uni.showToast({
					icon: 'success',
					title: '放行成功',
				})

				emit('releaseSuccess');
			} else {
				uni.showToast({
					icon: 'error',
					title: res.msg
				})
			}
		});
	}
</script>

<style lang="scss" scoped>
	.come-title {
		width: 100%;
		text-align: center;
		height: 7vw;
		line-height: 7vw;
		color: var(--color-29);
		font-size: var(--text-44);
		font-weight: 600;
	}

	.come-content {
		width: 100%;
		height: 35vw;
		display: flex;
		justify-content: space-around;

		.public-title {
			width: 100%;
			height: 4vw;
			line-height: 4vw;
			text-align: center;
			font-size: var(--text-20);
			color: var(--color-33);
		}

		.item-name {
			font-size: var(--text-20);
			color: var(--color-99);
			white-space: nowrap;
		}

		.item-info {
			font-size: var(--text-20);
			color: var(--color-33);
			font-weight: var(--fong-w-500);
		}


		.basic-box {
			width: 28%;
			height: 100%;
			background-color: #fff;
			border-radius: 0.52vw;
			padding: 50rpx 40rpx;
			box-sizing: border-box;

			.basic-item {
				width: 100%;
				height: calc(100% - 4vw);
				padding: 40rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				gap: 0.4vw;

				.item-box {
					margin: 30rpx 0rpx;
					display: flex;
				}
			}

			.Reason-item {
				width: 100%;
				height: calc(100% - 4vw);
				padding: 40rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				gap: 0.2vw;

				.item-box {
					margin: 16rpx 0rpx;
					display: flex;
				}

				.item-box-follow {
					height:12vh ;
					display: flex;
					flex-direction: column;
					-ms-overflow-style: none;
					.heavy {
						color: red;
						font-size: var(--font-16);
					}


					.scroll-item {
						display: flex;
						justify-content: space-around;
						margin: 0.4vw 0;

						.scroll-title {
							font-size: var(--text-18);
							color: var(--color-99);
						}

						.scroll-Text {
							font-size: var(--text-18);
							color: var(--color-33);
							font-weight: var(--fong-w-500);

						}
					}

				}
			}

			.identity-item {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 1vw;
				padding: 40rpx;
				box-sizing: border-box;

				.identity-box {
					// margin: 2vw 0vw;

					.item-infoImg {
						width: 10vw;
						height: 10vw;
						margin: 0.52vw 0vw;

						image {
							width: 100%;
							height: 100%;
							border-radius: 0.52vw;
						}
					}
				}

				.identity-title {


					.identity-title-box {
						display: flex;
					}

					.item-status {
						font-weight: 600;
						font-size: var(--text-20);
						// color: var(--color-01);


					}

					.status-pending {
						color: #ff8a00;
					}

					.status-approved {
						color: #006aff;
					}

					.status-completed {
						color: #11b800;
					}

					.status-rejected {
						color: #707070;
					}


				}

				.item-car {
					width: 100%;
					display: flex;
					position: relative;

					.endimg {
						position: absolute;
						right: 2vw;
						top: 50%;
						width: 13vw;
						height: 12vw;
						opacity: 0;
						transform: translateY(-100%) scale(0.8);
						/* 增加动画延迟和时长，让效果更明显 */
						transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

						/* 确保图片正确显示 */
						image {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}

					/* 激活状态 - 移除 !important 以避免样式优先级问题 */
					.endimg.stamp-active {
						opacity: 1;
						transform: translateY(-50%) scale(1);
						/* 添加弹跳动画 */
						animation: bounce 0.5s ease-out 0.2s;
					}

					/* 优化弹跳动画曲线 */
					@keyframes bounce {
						0% {
							transform: translateY(-50%) scale(1);
						}

						50% {
							transform: translateY(-58%) scale(1.08);
						}

						100% {
							transform: translateY(-50%) scale(1);
						}
					}





				}


				.item-btn {
					width: 100%;
					height: 3vw;
					margin-top: 4vw;
					display: flex;
					gap: 0.62vw;
					.btn-public:hover {
						transition: all 0.3s ease;
						transform: translateY(-5px);
						box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
					}

					.btn-public {
						width: 44%;
						height: 100%;
						border-radius: 2vw;
						text-align: center;
						line-height: 3vw;
						color: var(--color-ff);
						font-size: var(--text-24);
						font-weight: bold;
						cursor: pointer;
						transition: all 0.3s ease;
						transform: translateY(0);
						box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
					}

					.btn-ok {
						background-color: var(--color-32);
					}

					.btn-no {
						background-color: var(--color-f8);
					}

					.btn-Away {
						background-color: #11B800;
					}


				}

			}

		}
	}
</style>